<template>
  <div class="panel">
    <slot name="title"></slot>
    <slot name="main"></slot>
    <div class="panel_footer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      p_boxID: "",
      p_option: "",
    };
  },
  props: ["boxClassName", "componentOption"],
  methods: {
    echartsInit(option, boxID) {
      boxID = "." + boxID;
      //基于绘制好的盒子开始初始化echarts
      let myChart = this.$echarts.init(document.querySelector(boxID));
      myChart.setOption(option);
      //图表随屏幕变动自适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    if (this.boxClassName && this.componentOption) {
      this.echartsInit(this.componentOption, this.boxClassName);
    }
  },
};
</script>

<style scoped>
.panel {
  height: 4.8438rem /* 310px -> 4.8438rem */;
  background-color: #8de7fc;
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2344rem /* 15px -> .2344rem */ 0.625rem /* 40px -> .625rem */;
  background: url("../../assets/images/line(1).png");
  margin-bottom: 0.2344rem /* 15px -> .2344rem */;
  position: relative;
}
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.panel_footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel_footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.panel_footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.test {
  background-color: rgba(20, 41, 87, 0.3);
}
</style>